<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style>
.dspace {
    margin-right: 2px;
    width: 7em;
    height: 1em;
    visibility: hidden;
}
.dragme {
    background: #ffff80;
    border: solid 1px #ffff80;
    margin-right: 2px;
    height: 1.4em;
    width: 7em;
    text-align: center;
    position: absolute;
    cursor: move;
}
.darea {
    background: #eeeeee;
    margin-right: 2px;
    height: 1.4em;
    width: 7em;
    text-align: center;
    position: absolute;
    font-style: italic;
    color: #333333;
}
  </style>
  <script src="ianime028.js"></script>
  <script src="ibrowse010.js"></script>
  <script src="ianime028ex.js"></script>
  <script type="text/javascript">
var anime = new iAnime();

//============= Candidate for iBrowse =================
iBrowse.captureMouse = function(el, ev, fnMove, fnUp) {
   if (document.addEventListener) {
       document.addEventListener("mousemove", fnMove, true);
       document.addEventListener("mouseup", fnUp, true);
   } else if (document.attachEvent) {
       el.setCapture();
       el.attachEvent("onmousemove", fnMove);
       el.attachEvent("onmouseup", fnUp);
       el.attachEvent("onlosecapture", fnUp);
   }
   iBrowse.stopPropagation(ev);
   if (ev.preventDefault) ev.preventDefault();
   else ev.returnValue = false;
};

iBrowse.stopPropagation = function(ev) {
   if (ev.stopPropagation) ev.stopPropagation();
   else ev.cancelBubble = true;
};

iBrowse.releaseCapture = function(el, ev, fnMove, fnUp) {
    if (document.removeEventListener) {
        document.removeEventListener("mouseup", fnUp, true);
        document.removeEventListener("mousemove", fnMove, true);
    } else if (document.detachEvent) {
        el.detachEvent("onlosecapture", fnUp);
        el.detachEvent("onmouseup", fnUp);
        el.detachEvent("onmousemove", fnMove);
        el.releaseCapture();
    }
};

//=====================================================

function getElementsByClassName(clssName, tag) {
    if (!tag) tag="*";
    var elements = document.getElementsByTagName(tag);
    var ret = [];
    for(var i=0; i<elements.length; i++){
        var element = elements[i];
        if(element.className == clssName){
            ret.push(element);
        }
    }
    return ret;
}

function dragOver()
{
//    this.style.border = "solid 1px blue";
    if (this.x_inactive) return;
    cursor.x_element = this;
    cursor.style.left = this.offsetLeft + "px";
    cursor.style.top = this.offsetTop + "px";
    cursor.style.visibility = "visible";
}

function dragOut()
{
//    this.style.border = "solid 1px #ffff80";
    cursor.style.visibility = "hidden";
    cursor.x_element = null;
}

function dragStart(e)
{
    var self = cursor.x_element;
    var style = self.style;
    var stuck = null;
    style.zIndex = 2;
    iBrowse.setOpacity(self, 0.8);
    // style.border = "solid 1px #ffff80"; 
    if (!e) e = window.event;
    var dx = e.clientX - self.offsetLeft;
    var dy = e.clientY - self.offsetTop;
    iBrowse.captureMouse(cursor, e, dragMove, dragUp);

    function dragUp(e)
    {
        if (!e) e = window.event;
        // style.border = "solid 1px #ffff80"; // HACK: IE
        style.zIndex = 1;
        iBrowse.setOpacity(self, 1.0);
        if (stuck) {
            stuck.x_stuck = self;
            cursor.style.left = self.offsetLeft + "px";
            cursor.style.top = self.offsetTop + "px";
        } else {
            self.x_inactive = true;
            cursor.style.left = -20 + "px";
            cursor.style.top = 0 + "px";
            // cursor.style.visibility = "hidden";
            cursor.x_element = null;
            anime.add({ element:self, x:self.x_sx, y:self.x_sy, 
                        effect:'elastic', duration:600,
                        onComplete:function() {self.x_inactive=false;} });
        }
        iBrowse.releaseCapture(cursor, e, dragMove, dragUp);
        iBrowse.stopPropagation(e);
    }

    function dragMove(e)
    {
        if (!e) e = window.event;
        var x = e.clientX - dx;
        var y = e.clientY - dy;
        cursor.style.left = x + "px";
        cursor.style.top = y + "px";
        // style.border = "solid 1px #ffff80"; 
        stuck = null;
        for (var i=0; i<targets.length; i++) {
            var t = targets[i];
            var fx = x - t.x;
            var fy = y - t.y;
            var d2 = fx*fx + fy*fy;
            if (d2 < 100) {
                x = t.x;
                y = t.y;
                // style.border = "solid 1px blue";
                stuck = t;
                if (t.x_stuck) {
                    var org = t.x_stuck;
                    if (org != self) {
                      anime.add({ element:org, x:org.x_sx, y:org.x_sy, 
                                  effect:'elastic', duration:600 });
                    }
                    t.x_stuck = null;
                }
                break;
            } 
        }
        style.left = x + "px";
        style.top = y + "px";
        iBrowse.stopPropagation(e);
    }
}

var targets = [];
var cursor;

function init()
{
    var style;
    //
    cursor = document.createElement("div");
    style = cursor.style;
    style.position = "absolute";
    style.width = "7em";  
    style.height = "1.4em"; 
    style.border = "solid 1px red";
    style.visibility = "hidden";
    style.zIndex = 4;
    cursor.onmouseout = dragOut;
    cursor.onmousedown = dragStart;
    document.body.appendChild(cursor);
 
    //
    var elements = getElementsByClassName("dragme");
    for (var i=0; i<elements.length; i++) {
        var element = elements[i];
        element.onmouseover = dragOver;
        // element.onmouseout = dragOut;
        // element.onmousedown = dragStart;
        style = element.style;
        element.x_sx = element.offsetLeft;
        element.x_sy = element.offsetTop;
//        style.position = "absolute";
//         style.left = element.x_sx + "px";
//        style.top = element.x_sy + "px";
    }

    elements = getElementsByClassName("darea");
    for (var i=0; i<elements.length; i++) {
        var element = elements[i];
        targets.push({x:element.offsetLeft, y:element.offsetTop});
    } 
}
  </script>
</head>
<body onload="init()">
  <p>
    <span class="dragme">DragMe-1</span><img class="dspace" src="dummy.png" />
    <span class="dragme">DragMe-2</span><img class="dspace" src="dummy.png" />
    <span class="dragme">DragMe-3</span><img class="dspace" src="dummy.png" />
  </p>
  <p>...</p>
  <p>
    <span class="darea">{DropArea}</span><img class="dspace" src="dummy.png" />
    <span class="darea">{DropArea}</span><img class="dspace" src="dummy.png" />
    <span class="darea">{DropArea}</span><img class="dspace" src="dummy.png" />
  </p>
</body>
</html>
